<template>
	<!-- 产品列表 -->
<scroll-view @scrolltolower="scrolltolower" :scroll-y="true" :class="pageClass" :style="pageStyle" v-if="pageReady">
		<view class="index">
			<moxi-nav :set="navSet"></moxi-nav>
			
			<view
				:style="'position: sticky; height:40px;border-bottom: 1px solid #f2f2f2;z-index:10;top:' + navHeight + 'px;'">
				<moxi-choose v-model="info" :top="navHeight" @change="ch" :field="typeData" v-if="typeData.length">
					<view class="" @click.native.stop="qiehuan" slot="next" style="margin-top: 10px;">
						<u-icon :name="isTwoShow == true ? 'grid' : 'list-dot'" color="#606266" size="21"></u-icon>
					</view>
				</moxi-choose>
			</view>
<image :src="ad.cpl_img" v-if="ad.cpl_img&&ad.cpl_img.length"
			 mode="widthFix" style="width: 100%;" @click="navto(ad.cpl_url)"></image>
			<view class="search">
				<u-search placeholder="请输入内容" v-model="searchText" :showAction="false" bgColor="#fff"
					@search="searchBtn"></u-search>
			</view>



			<view class="twoShow" v-if="isTwoShow == true">
				<view class="lists">
					<view class="list" v-for="(item, index) in listsData" :key="index"
						@click="goTailorismDetail(item.id)">
						<view class="top">
							<img :src="item.img">
						</view>
						<view class="bottom">
							<view style="height: 79px;;">
								<view class="u-line-2" style="font-size: 14px;color: #333;margin-bottom: 4px;font-weight: 600;">{{item.title}}</view>
								<view class="u-line-2" style="font-size: 12px;color: #888888">
									{{item.desc}}
								</view>
							</view>
							
							<view class="money-views">
								<view class="money">
									<text style="margin-right: 2px;font-size: 14px;">&yen;</text>{{item.price}}
								</view>
								<view class="views">
									<u-icon name="eye" color="#a9a9a9" size="14"></u-icon><text
										style="margin-left: 4px;">{{item.view}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<u-divider style="padding-bottom: 10px;" text="没有更多内容了" v-if="hasMore == false"></u-divider>
			</view>

			<view class="oneShow" v-if="isTwoShow == false">
				
				<view class="list" v-for="(item, index) in listsData" :key="index" @click="goTailorismDetail(item.id)">
					<view class="left">
						<img :src="item.img">
					</view>
					<view class="right">
						<view style="height: 60px;;">
							<view class="u-line-1" style="font-size: 14px;color: #3d3d3d;margin-bottom: 3px;font-weight: 600;">{{item.title}}</view>
							<view class="u-line-2" style="font-size: 12px;color: #888888">
								{{item.desc}}
							</view>
						</view>
						<view class="money-views">
							<view class="money">
								<text style="margin-right: 2px;font-size: 14px;">&yen;</text>{{item.price}}
							</view>
							<view class="views">
								<u-icon name="eye" color="#a9a9a9" size="14"></u-icon><text
									style="margin-left: 4px;">{{item.view}}</text>
							</view>
						</view>
					</view>
				</view>
							<view style="display: flex;flex-direction: row;justify-content: center;">
					<u-divider style="padding-bottom: 10px;" text="没有更多内容了" v-if="hasMore == false">
						
					</u-divider>
					</view>
			</view>
		
						
			<view v-if="hasMore == false&&!listsData.length" 
			style="display: flex;flex-direction: row;justify-content: center;margin-bottom: 10px;">
				<view style="width: 100px;" @click="gengduo()">
					<u-button text="查看更多" icon="more-dot-fill" iconColor="#fff" :color="app_color" size="small"></u-button>
				</view>
			</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				screenIndex: -1,
				isTwoShow: false,
				isMore: false,
				info: {
					id: "",
					page: 1,
					page_num: 6,
					la: "",
					ln: "",
					province: "",
					city: "",
					type: "",
					search: "",
					tid: "",
					distance: "city", //距离排列方式asc,desc
					c_time: "", //排列方式asc,desc
					rate: "", //排列方式asc,desc
					price: "",
					view: "",
					tag:[]
				},
				hasMore: true,
				listsData: [],
				typeData: [],
				searchText: '',
				ad:{
					
				}
			}
		},
		onLoad() {
			if (this.param.type) {
				this.info.type = this.param.type
				this.locationInit()
			}else{
				this.msg("请选择产品企业类型")
			}
			
		},
		methods: {
			gengduo(){
			this.info.distance = 'asc';
			this.info.province = 'all';
				this.clear()
				this.get()
			},
			locationInit(){
				let self = this;
				this.moxiGetLocation((res)=>{
					if(res.latitude){
						self.info.la = res.latitude;
						self.info.ln = res.longitude;
						self.get()
					}else{
						self.getLocationShowBox()
					}
				})
			},
			getLocationShowBox(){
				let self = this;
				uni.showModal({
					title: '当前服务需要获取您的位置',
					content: '请将位置信息设置成“使用小程序时允许”',
					success: function (res) {
						if (res.confirm) {
							 self.openSet()
						} else if (res.cancel) {
							let page = getCurrentPages();
							if(page.length>1){
								uni.navigateBack();
							}else{
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}
						}
					}
				});
			},
			openSet(){
				let self = this;
				uni.openSetting({
				  success(res) {
				   if(res.authSetting['scope.userLocation']){
					   self.locationInit()
				   }else{
					   self.getLocationShowBox()
				   }
				  }
				});
			},
			ch(v) {
				this.info = Object.assign(this.info, v);
				this.clear()
				this.get()
			},
			// 触底加载
			scrolltolower() {
			
				if (this.hasMore) {
					this.info.page++
					this.get()
				}
			},
			// 获取数据
			get() {
				if (!this.hasMore) {
					return false;
				}
				let self = this
				this.moxiPost('/plugin/zx/index/info/get_product', this.info, function(data) {
					
					if (data.data.allpage <= self.info.page) {
						self.hasMore = false;
					}
					if(data.ad){
						self.ad = data.ad;
						self.$forceUpdate()
					}
					if (data.data.product_type && self.typeData.length == 0) {
						let type = [{
							name: '全部',
							value:""
						}];
						for(let k in data.data.product_type){
							type.push({
								name:data.data.product_type[k].name,
								value:data.data.product_type[k].id
							})
						}
					let  biaoqian = [];
					
					for(let k in data.product_tag){
						biaoqian.push({
							name:data.product_tag[k],
							value:k
						})
					}
						self.typeData = [{
							name: '分类',
							type: "list",
							key: "tid",
							list: type
						}, {
							name: '地区',
							type: 'city',
						}, {
							name: '距离',
							type: 'distance',
							distance: ''
						}, {
							name: '筛选',
							type: 'choose',
							list: [{
								name: "按价格排列",
								key: 'price',
								list: [{
										name: "默认",
										value: ""
									},
									{
										name: "由低到高",
										value: "asc"
									},
									{
										name: "由高到低",
										value: "desc"
									}
								]
							},{
								name: "按发布时间排列",
								key: 'c_time',
								list: [{
										name: "默认",
										value: ""
									},
									{
										name: "最新发布",
										value: "desc"
									},
									{
										name: "最早发布",
										value: "asc"
									}
								]
							},
							{
								name: "产品标签",
								key: 'tag',
								list: biaoqian
							},
							]
						}]
						
					}

					data.data.data.forEach(item => {
						self.listsData.push(item)
					})


				})
			},
			searchBtn() {
				this.searchText = this.searchText.trim()
				this.info.search = this.searchText
				this.clear()
				this.get()
			},
			qiehuan() {
				this.isTwoShow = !this.isTwoShow
			},
			clear() {
				this.hasMore = true
				this.info.page = 1
				this.listsData = []
			},
			goTailorismDetail(id) {
				this.navto('pages/plugin/zx/tailorismDetail?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		// width: 94%;
		// margin: 10px auto;
		padding: 12px;
		background-color: #f5f5f5;
	}

	.nav {
		height: 88px;
		position: sticky;
		top: 0;
		z-index: 20;
		background-color: #f2f1ef;
	}

	::v-deep .u-list {
		height: 200px !important;
	}

	::v-deep .u-fade-enter-active {
		z-index: 10 !important;
	}

	.oneShow {
		padding: 10px 10px;
		background-color: #f2f1ef;

		.list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			padding: 6px;
			border-radius: 6px;
			box-sizing: border-box;
			background-color: #fff;

			.left {
				width: 80px;
				height: 80px;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.right {
				width: calc(100% - 80px - 10px);
				margin-left: 10px;

				.name {
					
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.money-views {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.money {
						font-size: 18px;
						font-weight: bold;
						color: #f00;
					}

					.views {
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						font-size: 14px;
						color: #a9a9a9;
					}
				}
			}
		}
	}

	.typeChoose {

		.assort,
		.area {
			width: 100%;
			display: flex;
			position: fixed;
			top: 88px;
			z-index: 12;
			background-color: #fff;
			// background-color: #f2f2f2;

			.left {
				width: 40%;
			}

			.right {
				width: 60%;
				background: #f2f2f2;
			}
		}

		.sorts {
			width: 100%;
			max-height: 300px;
			position: fixed;
			top: 88px;
			padding: 8px 10px;
			box-sizing: border-box;
			z-index: 12;
			overflow: auto;
			background-color: #fff;


			.sort {
				margin-bottom: 10px;

				.title {
					margin-bottom: 6px;
					font-weight: bold;
				}

				.boxs {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					&::after {
						content: "";
						width: 30%;
						height: 0;
						visibility: hidden;
					}

					.box {
						width: 30%;
						margin-bottom: 4px;
						border: 1px solid #f00;
						text-align: center;
					}
				}
			}
		}
	}

	.selects {
		// width: 90%;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin: 0 auto;
		padding: 0 10px;
		box-sizing: border-box;
		position: sticky;
		z-index: 12;

		border-bottom: 1px solid #f1f1f1;
		background-color: #f2f2f2;
		// box-shadow: 1px -2px 11px 0px #858282;

		.select {
			width: 25%;
			padding: 10px 0;
			text-align: center;
			border-right: 1px solid #f1f1f1;
			background-color: #fdfdfd;

			&:nth-of-type(1) {
				border-radius: 6px 0 0 6px;
			}

			&:nth-last-of-type(1) {
				border: none;
			}
		}
	}

	.qiehuan {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0 6px 6px 0;
		text-align: center;
		background-color: #fff;
	}

	.screens {
		display: flex;
		justify-content: space-between;
		padding: 6px 10px 0;
		background-color: #f2f1ef;

		.screen {
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
			font-size: 18px;
			background-color: #fff;

			&:nth-of-type(1) {
				border-radius: 6px 0 0 6px;
			}

			&:nth-last-of-type(1) {
				border-radius: 0 6px 6px 0;
			}

			&.active {
				font-weight: bold;
				color: #eb5c51
			}

			.price {
				display: flex;
				align-items: center;

				.icons {
					margin-left: 4px;
				}
			}
		}
	}

	.twoShow {
		padding: 10px 10px 0;
		background-color: #f2f1ef;

		.lists {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.list {
			width: 45%;
			margin-bottom: 10px;
			padding: 6px;
			border-radius: 6px;
			background-color: #fff;

			.top {
				width: 150px;
				height: 150px;
				margin: 0 auto;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.bottom {
				margin-top: 6px;

				.name {
					height: 42px;
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.money-views {
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.money {
						font-size: 18px;
						font-weight: bold;
						color: #f00;
					}

					.views {
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						font-size: 14px;
						color: #a9a9a9;
					}
				}
			}
		}
	}

	.index {
		
		background-color: #f2f1ef;
	}
</style>